<!--by ysf-->
<template>
  <div id="queryResultPanel" class="query-result-panel">
    <div class="result-title">
      <div class="left-text">对象属性</div>
      <div
        class="right-close-icon"
        @click="close"
        title="关闭"
      >
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="result-content">
      <div
        v-for="k in keys"
        :key="k.value"
        class="attribute-item"
      >
        <template
          v-if="
            data &&
            k.value !== 'thumbnail' &&
            k.label !== 'id' &&
            data[k.value]
          "
        >
          <div class="attribute-name" :title="k.label">
            {{ k.label }}：
          </div>
          <div
            class="attribute-value"
            :title="data[k.value]"
            v-if="k.value !== 'floorArea'"
          >
            {{ data[k.value] || '-' }}
          </div>
          <div
            class="attribute-value"
            :title="data[k.value]"
            v-if="k.value === 'floorArea'"
          >
            {{ data[k.value] || '-'
            }}{{
              data['areaUnit']
                ? ` (${data['areaUnit']})`
                : ''
            }}
          </div>
        </template>
      </div>
      <div
        v-if="data && data.floorPics"
        class="thumbnail-item"
      >
        <div class="attribute-name" title="平面图">
          平面图：
        </div>
        <div class="thumbnail-value" title="点击查看大图">
          <el-image
            style="width: 100%; height: 100%"
            :src="getImg(data.floorPics, 'single')"
            :preview-src-list="
              getImg(data.floorPics, 'list')
            "
          />
        </div>
      </div>
      <div
        v-if="
          data &&
          data.floorMedias &&
          JSON.parse(data.floorMedias).length > 0
        "
        class="thumbnail-item"
      >
        <div class="attribute-name">视频监测：</div>
        <div class="thumbnail-value" style="height: auto">
          <video
            controls
            id="video"
            style="width: 100%; height: 200px"
            v-for="(v, index) in JSON.parse(
              data.floorMedias
            )"
            :key="index"
          >
            <source
              :title="v.name"
              :src="v.mediaUrl"
              type="video/mp4"
            />
          </video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fileUrl } from '@/api/info'

export default {
  name: 'Index',
  props: {
    data: Object
  },
  data() {
    return {
      imgSrc: '',
      imgList: [],
      keys: [
        {
          label: 'id',
          value: 'floorid'
        },
        {
          label: '所在楼层',
          value: 'bimFloorId'
        },
        {
          label: '楼栋名称',
          value: 'buildingName'
        },
        {
          label: '楼栋地址',
          value: 'address'
        },
        {
          label: '模型编号',
          value: 'floorNums'
        },
        {
          label: '占地面积',
          value: 'buildingArea'
        },
        {
          label: '模型类型',
          value: 'modelType'
        },
        {
          label: '模型高度',
          value: 'buildingHeight'
        },
        {
          label: '企业名称',
          value: 'qyname'
        },
        {
          label: '企业数',
          value: 'qycount'
        },
        {
          label: '占地面积',
          value: 'floorArea'
        },
        {
          label: '平面图',
          value: 'thumbnail'
        }
      ]
    }
  },
  watch: {},
  methods: {
    close() {
      this.$emit('close')
    },
    getImg(data, type) {
      const arr = []
      if (data) {
        const picArray = JSON.parse(data)
        picArray &&
          picArray.length &&
          picArray.map((p) => {
            // arr.push(`http://47.93.136.18:82/file${p.picUrl}`)
            arr.push(fileUrl + p.picUrl)
          })
      }
      if (type === 'single') {
        return arr.length > 0 ? arr[0] : ''
      }
      if (type === 'list') {
        return arr.length > 0 ? arr : []
      }
    }
  }
}
</script>

<style scoped lang="scss">
.query-result-panel {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 450px;
  background: transparent;
  border-radius: 4px;
  z-index: 9;
}

.query-result-panel:after {
  content: '';
  position: absolute;
  bottom: -24px;
  left: 60px;
  border-width: 0 0 25px 25px;
  border-style: solid;
  border-color: transparent rgba(25, 47, 61, 0.85);
  display: block;
  width: 0;
  display: none;
}

.result-title {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(25, 47, 61, 1);
  padding: 0 16px;
  background: rgb(12, 124, 156);
}

.left-text {
  font-size: 16px;
  color: white;
}

.right-close-icon {
  font-size: 14px;
  color: white;
  padding: 5px;
  cursor: pointer;
}

.result-content {
  width: 100%;
  height: calc(100% - 37px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  background: rgba(25, 47, 61, 0.85);
}

.attribute-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  background: transparent;
  margin-bottom: 5px;
}

.attribute-item:nth-child(odd) {
  background: rgba(0, 0, 0, 0.2);
}

.attribute-name {
  width: 28%;
  height: 36px;
  line-height: 36px;
  text-align: right;
  color: #ffffff;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-value {
  width: calc(72% - 1px);
  padding: 5px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  /*border-left: 1px solid rgba(255, 255, 255, 0.2);*/
  word-break: break-all;
}

.thumbnail-item {
  display: flex;
}

.thumbnail-value {
  width: calc(72% - 1px);
  height: 200px;
}
</style>
